<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历节点</title>
</head>
<body>
    <div name="app">
        <div id="houdunren">houdunren.com</div>
        <div name="hdcms">hdcms.com</div>
    </div>
    <script>
        // const nodes = document.getElementsByTagName('div');
        // //根据节点列表的length属性,使用for循环
        // for(let i = 0 ; i < nodes.length ; i++){
        //     console.log(nodes[i]);
        // }
        
        //forEach
        //nodeList节点列表也可以使用foreach来进行遍历,但是HTMLCollection则不可以
        // const nodes = document.querySelectorAll('div');
        // nodes.forEach((node,key) => {
        //     console.log(nodes[key]);
        // });


        //map
        //节点集合对象的原型中不存在map方法,可以借用Array的原型map方法实现
        // const nodes = document.querySelectorAll('div');
        // Array.prototype.map.call(nodes,(node,index) => {
        //     console.log(node,index);
        // });

        //使用Array.form用于将类数组转化为组件,并且提供第二个迭代函数，所以可以借用Array.form实现遍历
        //这里返回的是类数组
        // const nodes = document.getElementsByTagName('div');
        // Array.from(nodes,(node,index) => {
        //     console.log(node);
        // });


        //forOf
        //节点集合是类数组可迭代对象，所以可以使用for of 进行遍历
        // const nodes = document.getElementsByTagName('div');
        // for(const item of nodes){
        //     console.log(item);
        // }




    </script>
</body>
</html>